<!--
 * @Author: 黄达全
 * @Date: 2024-07-19 15:35:18
 * @LastEditTime: 2024-08-10 20:27:28
-->
<script lang="ts" setup>
import { reactive, ref, getCurrentInstance, ComponentInternalInstance } from 'vue';
import userApi from "@/api/model/manager"
import type { ApiResponse, LoginVO, ManagerInfoVO, LoginForm, Tool } from "@/common/type";
import { JwtTokenConstant, MessageConstant } from "@/common/constant";
import useElementPlus from "@/hooks/useElementPlus"
import useComRef from "@/hooks/useComRef"
import { ElForm } from "element-plus"
import { useRouter } from "vue-router"


const { proxy } = getCurrentInstance() as ComponentInternalInstance
const tool = proxy?.$tool as Tool

// 登录表单
const form: LoginForm = reactive({
    // username: '',
    // password: '',
    username: '黄达全',
    password: 'admin',
    autologin: false
})
// 表单规则
const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
}
// 是否登录中
const islogin = ref<boolean>(false)
// 表单ref
const loginFormRef = useComRef(ElForm)
const { notification } = useElementPlus()
const router = useRouter()
// 登录
const login = async (): Promise<void> => {
    if (islogin.value) return;
    // 验证表单
    const validate = await loginFormRef.value?.validate().catch((err) => console.log(err))
    if (!validate) return;

    // 登录中
    islogin.value = true

    const { code, data } = (await userApi.login(form)) as ApiResponse<LoginVO>

    // 登录成功
    if (code == 1) {
        // 存储token
        tool.data.set(JwtTokenConstant.token, data.token,)
    } else {
        // 登录结束
        islogin.value = false
        return;
    }

    // 获取权限菜单
    const { code: userCode, data: userInfo } = (await userApi.getUserInfo()) as ApiResponse<ManagerInfoVO>

    if (userCode == 1) {
        // 存储菜单
        tool.data.set(JwtTokenConstant.menu, userInfo.menus)
        // 存储用户信息
        tool.data.set(JwtTokenConstant.userInfo, userInfo)
        // 存储用户权限信息
        tool.data.set(JwtTokenConstant.permissions, userInfo.ruleNames)

    } else {
        // 消息提示
        notification({
            message: MessageConstant.GET_USER_INFO_FAIL,
            type: "error"
        })
        return;
    }
    // 消息提示
    notification({
        message:MessageConstant.LOGIN_SUCCESS,
        type: "success"
    })


    // 跳转首页
    router.push("/")
    // 登录结束
    islogin.value = false
}
</script>

<template>
    <el-form ref="loginFormRef" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login">
        <!-- 用户名 -->
        <el-form-item prop="username">
            <el-input v-model="form.username" prefix-icon="el-icon-user" clearable
                :placeholder="$t('login.userPlaceholder')"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
            <el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password
                :placeholder="$t('login.PWPlaceholder')"></el-input>
        </el-form-item>
        <!-- 24小时免登录和忘记密码 -->
        <el-form-item style="margin-bottom: 10px;">
            <el-col :span="12">
                <el-checkbox v-model="form.autologin" :label="$t('login.rememberMe')"></el-checkbox>
            </el-col>
            <el-col :span="12" class="login-forgot">
                <!-- <router-link to="/reset_password">{{ $t('login.forgetPassword') }}？</router-link> -->
            </el-col>
        </el-form-item>

        <!-- 登录按钮 -->
        <el-form-item>
            <el-button color="var(--primary-theme-color)" type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{
        $t('login.signIn') }}</el-button>
        </el-form-item>
    </el-form>
</template>

<style lang="scss" scoped>
:deep(.login-forgot) {
    text-align: right;

    a {
        color: var(--el-color-primary);

        &:hover {
            color: var(--el-color-primary-light-3);
        }
    }
}
</style>
